<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3D魔方</title>
		<style>
			/* 通用选择器：通用效果 盒模型：内外边距 */
			*{
				margin: 0;
				padding: 0;
			}
			/* 1.容器：看3D视觉效果--宽高 居中 视觉属性 */
			.container{
				width: 500px;
				height: 500px;
				margin: 200px auto;
				/* 视觉属性： 数值px;拉开距离 */
				perspective: 3000px;
				bor der: 1px solid red;
			}
			/* 魔方整体  宽高 指定3D坐标轴【3D效果层】 3.查看3D坐标轴【X,Y】 4.动画*/
			.box{
				width:500px;
				height: 500px;
				/* 3D效果层：魔方上指定3D坐标轴  */
				transform-style: preserve-3d;
				/* 倾斜：X 45 Y 45*/
				transform: rotateX(45deg) rotateY(45deg);
				animation: mofang 8s linear infinite;
			}
			@keyframes mofang{
				0%{
					transform: rotateX(45deg) rotateY(45deg);
				}
				70%{
					transform: rotateX(180deg) rotateY(180deg);
				}
				100%{
					transform: rotateX(360deg) rotateY(360deg);
				}
			}
			/* 3.六个面：公共属性 设置宽高 绝对定位 */
			.page{
				width: 500px;
				height: 500px;
				/* 绝对定位：6个面到一个点 ：定坐标轴 6个面所有的坐标轴是一致的 */
				position: absolute;
			}
			/* 1.六个面添加六个颜色 */
			.page_top{
				background-color: #ff0000;
				/* z轴 顶部平移250px 向上*/
				transform: translateZ(250px);
				background: url(../project/img/30.jpeg);
				background-size: 100% 100%;
				
			}
			.page_bottom{
				background-color: #ffff00;
				/* z轴 底部平移250px 向下 */
				transform: translateZ(-250px);
				background: url(../project/img/31.jpeg);
				background-size: 100% 100%;
			}
			.page_left{
				background-color: #00aaff;
				/* x轴左平移 -250px 按照Y轴 旋转 90deg */
				transform: translateX(-250px) rotateY(90deg);
				background: url(../project/img/32.jpg);
				background-size: 100% 100%;
			}
			.page_right{
				background-color: #00ff00;
				/* x轴右平移 250px 按照Y轴 旋转 90deg */
				transform: translateX(250px) rotateY(90deg);
				background: url(../project/img/33.png);
				background-size: 100% 100%;
			}
			.page_before{
				background-color: #ffaaff;
				/* y轴 向前平移 250px 按照X轴 旋转 90deg */
				transform: translateY(250px) rotateX(90deg);
				background: url(../project/img/34.jpeg);
				background-size: 100% 100%;
				
			}
			.page_after{
				background-color: #aa55ff;
				/* y轴 向后平移 -250px 按照X轴 旋转 90deg */
				transform: translateY(-250px) rotateX(90deg);
				background: url(../project/css/35.jpg);
				background-size: 100% 100%;
			}
		</style>
	</head>
	<body>
		<!-- 3D魔方  1.容器：看3D的效果 2.魔方的整体 3.6个面 -->
		<div class="container">
			<div class="box">
				<!-- 6个面特点：6个面宽高一致 颜色不一致
				 使用类选择器：多别名解决上述问题-->
				<div class="page page_top"></div>
				<div class="page page_bottom"></div>
				<div class="page page_left"></div>
				<div class="page page_right"></div>
				<div class="page page_before"></div>
				<div class="page page_after"></div>
			</div>
		</div>
		<audio src="img/ドラえもんのうた (哆啦A梦之歌).mp3"></audio>
	</body>
</html>